<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/lib/jquery.min.js"></script>
  <script src="js/ajaxSet.js"></script>
  <style>
    html,body,#app{width: 100%;height: 100%}
  </style>
  <script src="锦城街道2.js"></script>
</head>
<body>
<div id="app"></div>
<script src="js/lib/echarts.min.js"></script>
<script src="linan.js"></script>
<script src="锦城街道1.js"></script>
<script>

  //var myChart = echarts.init(document.getElementById('app'));

  echarts.registerMap('linan', linan)
  var isProvince = true;

  echarts.registerMap('jingcheng', jingcheng)
  var linanStreet = [ '玲珑街道','锦南街道',  '锦城街道', '锦北街道','青山湖街道', '高虹镇', '太湖源镇', '於潜镇', '太阳镇', '潜川镇', '昌化镇','河桥镇', '湍口镇', '清凉峰镇', '岛石镇', '板桥镇','天目山镇', '龙岗镇'];

  var lineData = [];
  for (let i = 0; i <linanStreet.length ; i++) {
    lineData.push({name:linanStreet[i],value:~~(Math.random() * 200)})
    if( linanStreet[i] !== '锦城街道') { // 锦城街道有2块区域 十分特殊
      echarts.registerMap(linanStreet[i], {
          "type": "FeatureCollection",
          "features": [linan.features[i]]
        }
      )
    } else {
      echarts.registerMap(linanStreet[i], jingcheng);
    }
  }

  dataArr = [];

  var mapSchemaCharts = echarts.init(document.getElementById('app'));
  //this.mapSchemaCharts = mapSchemaCharts;
  mapSchemaCharts.showLoading();

  // 下面要用geo 把china 换成临安
  let option = {
    tooltip: {
      show : true,
      backgroundColor: '#fff',
      textStyle: {
        color: '#000',
        lineHeight: '24px',
      },
      padding: [15, 25, 15, 20],
      trigger: 'item',
      formatter: function (params) {
        console.log(params)
        /*if (params.length > 0) {
          let h1 =
            `<div style="font-size:11px;font-weight:600;margin-bottom:6px">${params[0].name}</div>`;
          params.forEach((item, index) => {
            h1 +=
              `<div style="padding-top:5px;padding-bottom:5px;">${item.marker} ${item.seriesName}: ${parseInt(item.data)}${dialogUnit2[index]}</div>`
          })
          return h1;
        } else {
          return ''
        }*/
        return '66'
      }
    },
    visualMap: {
      type: 'piecewise',
      min: 0,
      max: 1000,
      right: 15,
      bottom: 20,
      showLabel: !0,
      text: ["高", "低"],
      textStyle: {
        color: '#ffffff'
      },

      pieces: [{
        gt: 100,
        label: "> 100 ",
        color: "#8803FC"
      }, {
        gte: 10,
        lte: 100,
        label: "10 - 100 ",
        color: "#2356FF"
      }, {
        gte: 1,
        lt: 10,
        label: "1 - 9 ",
        color: "#2A94BE"
      }, {
        value: 0,
        color: "#2a94be"
      }],
      show: !0
    },
    series: [{
      type: 'map',
      mapType: 'linan',//这个地方是重点,
      roam: false,
      zoom:0.8,
      scaleLimit: {
        min: 1,
        max: 20,
      }, top: 20,
      left: 0,
      //layoutSize: window.innerWidth > 460 ? 460 : window.innerWidth * 0.94 - 30,//省份地图大小为600xp。
      layoutCenter: ['50%', '50%'],//距左百分比，距上百分比
      itemStyle: {
        normal: {
          areaColor: '#c9dbff',//#013aff
          borderColor: '#0e80fe',
          borderWidth: 1,
          color: "#FFFFFF",
          areaOpacity: 1,
          label: {show: true, color: 'white', fontSize: 14}
        },
        emphasis: {areaColor: '#2030af', label: {show: true, color: 'white'},}
      },
      visualMap: {
        show: true,
        type: 'continuous',
        text: ['高', '低'],
        textStyle: {
          color: '#fff'
        },
        inverse: false,
        itemHeight: 100,
        calculable: true,
        min: 0,
        max: 100,
        left:25,
        bottom: 15,
        inRange: {
          color: [ '#1bb1be','#316ad2', '#9b05f1','#8d0b7e' ]
        }
      },
      data:lineData,
      label: {
        normal: {
          textStyle: {
            fontSize: 12,
            fontWeight: 'bold',
            color: '#fff'
          }
        }
      }
    }, {
      name: '图标',
      type: 'custom',
      roam: false,
      zlevel: 30,
      coordinateSystem: 'geo',
      renderItem: function (params, api) {//具体实现自定义图标的方法
        /*var seriesModel = mapSchemaCharts.getModel().getSeriesByIndex(0);
        var coordSys = seriesModel.coordinateSystem;
        var point = coordSys.dataToPoint([dataArr[params.dataIndex].lon, dataArr[params.dataIndex].lat]) || [0, 0];
        return {
          type: 'image',
          style: {
            image: category[dataArr[params.dataIndex].category || 0].icon,
            x: point[0],
            y: point[1]-15,
            width: 15,
            height: 15
          }
        }*/
      },
      data: dataArr
    }],
  };

  let optionStreet =  function (streetName) {
    return {
      tooltip: {
        show : true,
        trigger: 'item',
        formatter: '{b}'
      },
      series: [{
        type: 'map',
        mapType: streetName,//这个地方是重点,
        roam: false,
        zoom: 0.8,
        scaleLimit: {
          min: 1,
          max: 20,
        }, top: 20,
        left: 0,
        layoutSize: window.innerWidth > 460 ? 460 : window.innerWidth * 0.94 - 30,//省份地图大小为600xp。
        layoutCenter: ['50%', '50%'],//距左百分比，距上百分比
        itemStyle: {
          normal: {
            areaColor: '#3272ca',
            borderColor: '#2558a5',
            borderWidth: 1,
            color: "#FFFFFF",
            areaOpacity: 1,
            label: {show: true, color: 'white', fontSize: 14}
          },
          emphasis: {areaColor: '#2030af', label: {show: true, color: 'white'},}
        },
        data: lineData,
        label: {
          normal: {
            textStyle: {
              fontSize: 12,
              fontWeight: 'bold',
              color: '#fff',
              backgroundColor: '#fff',
              textStyle: {
                color: '#000',
                lineHeight: '24px',
              },
              padding: [15, 25, 15, 20],
              //label格式化
              formatter: function (params) {
                console.log(params)
                /*if (params.length > 0) {
                  let h1 =
                    `<div style="font-size:11px;font-weight:600;margin-bottom:6px">${params[0].name}</div>`;
                  params.forEach((item, index) => {
                    h1 +=
                      `<div style="padding-top:5px;padding-bottom:5px;">${item.marker} ${item.seriesName}: ${parseInt(item.data)}${dialogUnit2[index]}</div>`
                  })
                  return h1;
                } else {
                  return ''
                }*/
              }
            }
          }
        }
      }, {
        name: '图标',
        type: 'custom',
        roam: false,
        zlevel: 30,
        coordinateSystem: 'geo',
        renderItem: function (params, api) {//具体实现自定义图标的方法
          /*var seriesModel = mapSchemaCharts.getModel().getSeriesByIndex(0);
          var coordSys = seriesModel.coordinateSystem;
          var point = coordSys.dataToPoint([dataArr[params.dataIndex].lon, dataArr[params.dataIndex].lat]) || [0, 0];
          return {
            type: 'image',
            style: {
              image: category[dataArr[params.dataIndex].category || 0].icon,
              x: point[0],
              y: point[1]-15,
              width: 15,
              height: 15
            }
          }*/
        },
        data: dataArr
      }]
    }
  }

  mapSchemaCharts.clear();

  mapSchemaCharts.setOption(option, true);
  
  mapSchemaCharts.on('click', function (params) {
    console.log(arguments);
    console.log('dianjihou',params)
    if(params.componentSubType === "map") {
      if (isProvince) {
        isProvince = false;
        var jiedao = params.name;
        console.log(jiedao);
        mapSchemaCharts.clear();
        mapSchemaCharts.setOption(optionStreet(jiedao))
      }
    }
  });
  mapSchemaCharts.hideLoading();
  
  
</script>
</body>
</html>